<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading>退款详情</e-heading>
      <div style="background:#f5f5f5;padding:15px;margin-bottom:15px">服务单信息</div>
      <el-form v-bind="getFormProps()" ref="form" class="detail">
        <el-form-item label="服务单号：">
          {{detail.refundNumber}}
        </el-form-item>
        <el-form-item label="申请状态：">
          <span>
          {{statusMap[detail.refundStatus]}}
          </span>
        </el-form-item>
        <el-form-item label="订单编号：">
          {{detail.orderNumber}}
          <router-link v-if="detail.orderNumber" class="link" :to="'/order/detail/'+detail.orderId">
            查看订单
          </router-link>
        </el-form-item>
        <el-form-item label="申请时间：">
          {{detail.createTime && new Date(detail.createTime).format('yyyy-MM-dd hh:mm:ss')}}
        </el-form-item>
        <el-form-item label="用户昵称：">
          {{detail.buyerName}}
        </el-form-item>
        <div class="divider"></div>
        <el-form-item v-if="detail.refundAmount" label="订单金额：">
          {{detail.refundAmount|formatMoney}}
        </el-form-item>
        <el-form-item v-if="detail.refundAmount" label="确认退款金额：">
          {{detail.refundAmount|formatMoney}}
        </el-form-item>
        <el-form-item label="退款类型：">
          {{['退余额','原路退回'][detail.refundMode]}}
        </el-form-item>
        <el-form-item v-if="detail.refundStatus==4" label="退款时间：">
          {{detail.refundTime && new Date(detail.refundTime).format('yyyy-MM-dd hh:mm:ss')}}
        </el-form-item>
        <el-form-item label="退款原因：">
          {{detail.refundReasonDesc }}
        </el-form-item>
        <el-form-item label="问题描述：">
          {{detail.refundDesc }}
        </el-form-item>
        <el-form-item label="上传凭证：">
          <e-preview-box class="refund-image">
            <img v-for="(item, index) in detail.imgList" :src="item" :key="index"/>
          </e-preview-box>
        </el-form-item>
        <template v-if="detail.refundStatus == '1'">
          <div class="divider"></div>
          <el-form-item label="处理备注：">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              >
            </el-input>
          </el-form-item>
          <br/>
          <br/>
          <el-form-item label="">
            <el-button type="primary" native-type="submit" :loading="loadingType=='1' && loading">确认退款</el-button>
            <el-button type="danger" @click="handleCancel" :loading="loadingType=='2' && loading">拒绝退款</el-button>
          </el-form-item>
        </template>
        <template v-else>
          <div class="divider"></div>
           <el-form-item label="处理人员：">
            {{detail.auditorName}}
          </el-form-item>
           <el-form-item label="处理时间：">
            {{detail.updateTime && new Date(detail.updateTime).format('yyyy-MM-dd hh:mm:ss')}} 
          </el-form-item>
           <el-form-item label="操作备注：">
            {{detail.auditOpinion}}
          </el-form-item>
        </template>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { form } from 'utils/mixins'
import refundApi from 'api/refund'

export default {
  mixins: [form],
  computed: {
    ...mapState({
      detail: state => state.refund.detail,
      statusMap: state => state.refund.statusMap
    })
  },
  data () {
    return {
      loadingType: '',
      loading: false,
      form: {
        remark: ''
      }
    }
  },
  mounted () {
    this.fetch()
  },
  methods: {
    fetch () {
      this.$store.dispatch('refund/detail', {refundNumber: this.$route.params.id})
    },
    submit () {
      this.loadingType = '1'
      refundApi.confirm({
        id: this.detail.id,
        refundStatus: 3,
        orderDetailId: this.detail.orderDetailId,
        auditOpinion: this.form.remark
      }, {context: this}).then(() => {
        this.fetch()
      })
    },
    handleCancel () {
      this.loadingType = '2'
      refundApi.confirm({
        id: this.detail.id,
        refundStatus: 2,
        orderDetailId: this.detail.orderDetailId,
        auditOpinion: this.form.remark
      }, {context: this}).then(() => {
        this.fetch()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail{
    .el-form-item{
      margin-bottom:0;
    }
    .el-col-4{
      text-align:right;
      padding-right:10px;
    }
    .divider{
      margin:15px 0;
    }
    .refund-image{
      font-size:0;
      img{
        width:200px;
        height:200px;
        margin-bottom:5px;
        margin-right:5px;
      }
    }
  }

</style>
